<template>
  <view class="equipment-container">
    <z-paging ref="paging" v-model="userChannelList" @query="queryList" :auto="true">
      <view class="product-list">
        <u-cell :value="item.gbDeviceId" :title="item.gbName" v-for="(item, key) in userChannelList" :key="key" @click="handleClick(item)" isLink>
          <view slot="title">
            <view class="id">{{ item.gbDeviceId }}</view>
            <view class="name">{{ item.gbName }}</view>
          </view>
          <view slot="value" class="right">
            <!-- <view class="status" :style="{ color: item.gbStatus === 'OFF' ? '#ff4d4f' : '#52c41a' }">{{
              item.gbStatus === "OFF" ? "离线" : "在线"
            }}</view> -->
            <image :src="item.gbStatus === 'OFF' ? offlineSrc : onlineSrc" class="status-icon"></image>
            <view class="playback-wrap">
              <image :src="playbackSrc" class="playback-icon" @tap.stop="handlePlayback(item)"></image>
            </view>
          </view>
        </u-cell>
      </view>
    </z-paging>
  </view>
</template>

<script>
import { getUserChannelList } from "@/apis/equipment"
export default {
  data() {
    return {
      userChannelList: [],
      onlineSrc: require('@/static/images/zx.png'),
      offlineSrc: require('@/static/images/lx.png'),
      playbackSrc: require('@/static/images/huifang.png'),
    }
  },
  methods: {
    queryList(pageNo, pageSize) {
      const params = {
        page: pageNo,
        count: 10,
      }
      getUserChannelList(params).then((res) => {
        console.log(res)
        // this.userChannelList = res;
        this.$refs.paging.complete(res.list)
      })
    },
    handleClick(item) {
      if (item.gbStatus === "OFF") {
        return uni.showToast({
          title: "当前设备离线",
          icon: "none",
          duration: 1500,
        })
      }
      uni.navigateTo({
        url: "/pagesIndex/videoPreview?channelId=" + item.gbId+"&deviceId=" + item.gbDeviceId,
      })
    },
    handlePlayback(item) {
      uni.navigateTo({
        url: "/pagesIndex/playback?channelId=" + item.gbId,
      })
    }
  },
  onLoad() {},
  onShow() {},
  created() {

  },
}
</script>

<style lang="less" scoped>
.product-list {
  box-sizing: border-box;
  width: 710rpx;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 16rpx;
  margin-top: 30rpx;
  .id {
    font-size: 30rpx;
    color: #333;
  }
  .name {
    font-size: 30rpx;
    color: #333;
    margin-top: 16rpx;
  }
  .status {
    font-size: 28rpx;
  }
  .status-icon {
    width: 40rpx;
    height: 40rpx;
  }
  .btn {
    margin-top: 16rpx;
    font-size: 28rpx;
    border-radius: 20rpx;
    padding: 6rpx 20rpx;
    border: 1rpx solid #333;
  }
  .playback-icon {
    width: 96rpx;
    height: 37rpx;
    // padding: 20rpx;
    // margin-top: 16rpx;
    // margin-right: -80rpx;
  }
  .right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-left: 10rpx;
    margin-right: 6rpx;
  }
  .playback-wrap {
    padding-left: 30rpx;
    padding-top: 16rpx;
  }
}
</style>
